<template>
  <u-popup :show="show" :safeAreaInsetBottom="false" mode="center" @close="proClear" :round="10">
    <view class="bind_box">
      <view class="bind_box_top">
        <view class="bind_title" v-if="titlea">{{ titlea }}</view>
        <view class="bind_title" v-if="titleb">{{ titleb }}</view>
        <view class="bind_text" v-if="text">{{ text }}</view>
      </view>
      <view class="bind_btn">
        <view class="bind_btn_btn bind_btn_a" :style="{color:leftColor}" @click.stop="proClear">{{ leftBtn || '取消' }}</view>
        <view class="bind_btn_btn bind_btn_b" :style="{color:rightColor}" @click.stop="bindPro">{{ rightBtn || '确认' }}</view>
      </view>
    </view>
  </u-popup>
</template>

<script setup>
/**
 *
 *
 * NavBar 自定义弹窗
 * @property {String} titlea 第一行标题
 * @event {String} titleb 第二行标题
 * @event {String} text 说明
 * @event {String} leftBtn 左侧按钮文字
 * @event {String} rightBtn 右侧按钮文字
 * @event {String} leftColor 左侧按钮颜色
 * @event {String} rightColor 右侧按钮颜色
 * @event {Function} bind 右侧按钮点击时触发
 * @event {Function} clear 点击左侧按钮时触发
 *
 * @example <h-modal :show="bindShow" titlea="标题" titleb="二标题" text="详细说明"  leftColor="#5C5C5C" rightColor="#202020" leftBtn="左按钮" rightBtn="右按钮" @clear="" @bind=""></h-modal>
 */
import { ref, onMounted } from 'vue'

const props = defineProps({
  titlea: {
    type: String,
  },
  titleb: {
    type: String,
  },
  text: {
    type: String,
  },
  leftBtn: {
    type: String,
  },
  rightBtn: {
    type: String,
  },
  show: {
    type: Boolean,
  },
  leftColor: {
    type: String,
  },
  rightColor: {
    type: String,
  },
})
const emit = defineEmits(['clear', 'bind'])
function proClear() {
  emit('clear')
}
function bindPro() {
  emit('bind')
}
</script>

<style lang="scss" scoped>
.bind_box {
  width: 540rpx;
  background: #ffffff;
  border-radius: 20rpx;
  text-align: center;
  .bind_box_top {
    padding: 50rpx 0;
  }
  .bind_title {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #202020;
		line-height: 40rpx;
		text-align: center;
  }
  .bind_text {
    font-family: PingFang SC, PingFang SC;
    font-size: 26rpx;
    color: #828282;
    line-height: 45rpx;
    padding-top: 4rpx;
  }
  .bind_btn {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .bind_btn_btn {
      width: 50%;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      line-height: 100rpx;
      height: 100rpx;
      border-top: 1rpx solid #e6e6e6;
    }
    .bind_btn_a {
      color: #828282;
      box-sizing: border-box;
      border-right: 1rpx solid #e6e6e6;
    }
    .bind_btn_b {
      color: #00C5BA;
    }
  }
}
</style>
